<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!--第一个代表路径,这里是相对路径,head代表当前路径下的head.html,第二个表示在那个页面中的thymeleaf规则变量名称-->
<head th:replace="head :: commonHead('首页 ')">

    <!--<script src="https://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>-->
</head>

<body>
<!--<div style="position: relative; float: left; top: 500px; z-index: 2;">
    <wb:share-button appkey="916972202" addition="simple" type="button"></wb:share-button>
</div>-->
<div id="app">
    <div th:replace="head :: header"></div>

    <div class="banner pc">
        <div>
            <img th:src="${#request.getAttribute('ctx') + '/static/jinpaitoupiao.png'}" style="width: 100%;height: 430px;">
        </div>
    </div>

<!--    <div class="phone_title_div">-->
<!--        <div class="works_title_ch">-->
<!--            <span>作品墙</span><br/>-->
<!--        </div>-->
<!--        <div class="works_title_eh">-->
<!--            <span class="pc">PERSONAL PORTFOLIO</span>-->
<!--            &lt;!&ndash;<a class="phone" style="color: black;" th:href="@{/work}"><i class="el-icon-arrow-right"></i></a>&ndash;&gt;-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="img_container">-->
<!--        <el-row class="elemtnt_row index_row_lg">-->
<!--            <div class="index_row_div_lg" v-for="(item, index) in videoTableData" :key=item.id :xs="12" :sm="4"-->
<!--                 :md="4" :lg="4" :xl="4" stripe>-->
<!--                <div class="show_info div_row_index_lg div_row_index" @click="play(index)" prop="id" label="id"-->
<!--                     style="height:100%;">-->
<!--                    <img style="width:100%; height:100%;" class="cImg" v-if="!isMobileTerminal" :src="item.spriteUrl"/>-->
<!--                    <img style="width:100%; height:100%;" class="cImg" v-else :src="item.spriteUrl2"/>-->
<!--                    <div class="img_info">-->
<!--                        <div class="info_title pc">-->
<!--                            {{item.name}}-->
<!--                        </div>-->
<!--                        <div class="info_content pc" :title="item.description">-->
<!--                            {{item.description}}-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </el-row>-->
<!--    </div>-->
<!--    <div class="process_pc pc">-->
<!--        <img th:src="${#request.getAttribute('ctx') + '/static/front/img/liucheng-icon.png'}"/>-->
<!--    </div>-->


    <!--轻松3步，即可获得想要的视频-->
    <div class="index-content index-content-1">
        <div class="index-content-box">
            <h2>轻松3步，即可获得想要的视频</h2>
            <div class="box-row">
                <dl>
                    <dt><img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-1.png'}"/></dt>
                    <dd>
                        <h3>在线注册</h3>
                        <p>领取100元优惠券</p>
                    </dd>
                </dl>
                <dl>
                    <dt><img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-2.png'}"/></dt>
                    <dd>
                        <h3>沟通需求</h3>
                        <p>时刻在线，详细解答</p>
                    </dd>
                </dl>
                <dl>
                    <dt><img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-3.png'}"/></dt>
                    <dd>
                        <h3>轻松下单</h3>
                        <p>即刻下单，无忧售后</p>
                    </dd>
                </dl>
            </div>
            <a sec:authorize="not isAuthenticated()" th:href="@{/register}" class="big-btn">立即注册</a>
            <a sec:authorize="isAuthenticated()" href="javascript:;" class="big-btn" onclick="$('#nb_icon_wrap').click();">立即沟通</a>
        </div>
    </div>

    <!--为什么选择巨桃游娱-->
    <div class="index-content index-content-2">
        <div class="index-content-box">
            <h2>为什么选择巨桃游娱</h2>
            <div class="box-row">
                <ul class="clearfix">
                    <li>
                        <div class="translucent"></div>
                        <h3>专业短视频拍摄团队</h3>
                        <div class="modle">
                            <p>“巨桃游娱”采用最严格的拍摄团队录用标准，编剧、导演、制片和剪辑录用前层层筛选，录用后定期培训考核，确保拥有国际一线水准的高质量制作团队</p>
                        </div>
                    </li>
                    <li>
                        <div class="translucent"></div>
                        <h3>多对一的管家式服务</h3>
                        <div class="modle">
                            <p>“巨桃游娱”都将为每一位客户配备客服、编剧、导演、制片、剪辑各一名，全程时刻在线根据客户的所有需求提供多对一的管家式服务！</p>
                        </div>
                    </li>
                    <li>
                        <div class="translucent"></div>
                        <h3>超低的费用标准</h3>
                        <div class="modle">
                            <p>打破传统的高昂视频价格市场，低预算也能给你“好莱坞”大片的效果。特色短视频不再是网红的标签，也将是我们大众介绍自我的“名片”</p>
                        </div>
                    </li>
                    <li>
                        <div class="translucent"></div>
                        <h3>高效的制作流程</h3>
                        <div class="modle">
                            <p>快、精、准的掌握你的需求，平台规范的服务流程和制作体系，高效率的完成拍摄和后期制作，给你最舒适的用户体验</p>
                        </div>
                    </li>
                    <li>
                        <div class="translucent"></div>
                        <h3>海量优质的短视频</h3>
                        <div class="modle">
                            <p>“巨桃游娱”推出海量优质的短视频给你参考，娱乐性的网红视频、专业的企业宣传视频、量身定制的工作简历和婚恋简历等多种类型的视频</p>
                        </div>
                    </li>
                    <li>
                        <div class="translucent"></div>
                        <h3>独特的短视频定制</h3>
                        <div class="modle">
                            <p>只要你有想法、要特色，“巨桃游娱”就为你量身定制属于你独一无二的特色“小电影”，专业的拍摄团队供你选择，编剧给你传奇人生，导演配合你演出，你的人生，你做主！</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--严格的摄制团队录用标准-->
    <div class="index-content index-content-3">
        <div class="index-content-box">
            <h2>严格的摄制团队录用标准</h2>
            <div class="box-row">
                <img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-box-3.png'}"/>
            </div>
        </div>
    </div>

    <!--我们的作品标准-->
    <div class="index-content index-content-4">
        <div class="index-content-box">
            <h2>我们的作品标准</h2>
            <div class="box-row">
                <dl>
                    <dt><img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-4.png'}"/></dt>
                    <dd>
                        <h3>技术性</h3>
                        <p>强大的后期技术给你3D视感</p>
                    </dd>
                </dl>
                <dl>
                    <dt><img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-5.png'}"/></dt>
                    <dd>
                        <h3>创意性</h3>
                        <p>新颖的故事情节搭配独特的你</p>
                    </dd>
                </dl>
                <dl>
                    <dt><img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-6.png'}"/></dt>
                    <dd>
                        <h3>艺术性</h3>
                        <p>唯美的画面结合深入人心的内涵</p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>

    <!--我们的承诺-->
    <div class="index-content index-content-5">
        <div class="index-content-box">
            <h2>我们的承诺</h2>
            <div class="box-row clearfix">
                <div class="row-con clearfix">
                    <div class="row-con-left-img">
                        <img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-7.png'}"/>
                    </div>
                    <div class="row-con-right-text">
                        <h4>作品承诺</h4>
                        <p>“巨桃游娱”承诺会对给到你的作品进行层层把关，通过专业的质量审核，保证给到你的是精拍细选的产品</p>
                    </div>
                </div>
                <div class="row-con clearfix">
                    <div class="row-con-left-img" style="width: 58px;">
                        <img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-8.png'}"/>
                    </div>
                    <div class="row-con-right-text">
                        <h4>服务承诺</h4>
                        <p>“巨桃游娱”承诺为每一位客户配备客服、编剧、导演、制片、剪辑各一名，全程时刻在线根据客户的所有需求提供多对一的管家式服务，解决你在拍摄过程中存在的各种问题，只为打造更好的你！</p>
                    </div>
                </div>
                <div class="row-con clearfix">
                    <div class="row-con-left-img" style="width: 39px;margin-top:19px;">
                        <img th:src="${#request.getAttribute('ctx') + '/static/front/img/index-icon-9.png'}"/>
                    </div>
                    <div class="row-con-right-text">
                        <h4>团队承诺</h4>
                        <p>“巨桃游娱”严格把控拍摄团队标准，要求拍摄团队必须是具备多年从业经验的专业人士，为每位客户保驾护航！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div th:include="foot :: body"></div>
</div>

</body>

<!-- tencent cloud production -->
<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

<!-- wechat connect -->
<!-- <script src="//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> -->

<script th:inline="javascript">
    /*var obj = new WxLogin({
        self_redirect: true,
        id: "wechat_login_container",
        appid: "wxf6a149f7343f3ac0",
        scope: "snsapi_login",
        redirect_uri: encodeURI("http://lua-lu.com/wechat"),
        state: "STATE",
        style: "white",
        href: ""
    });*/

    var videoData = [[${videoPage.list}]];
    for (var i in videoData) {
        videoData[i].spriteUrl = uploadServer + videoData[i].spriteUrl;
        videoData[i].spriteUrl2 = uploadServer + videoData[i].spriteUrl2;
    }

    var userData = [[${userPage.list}]];
    for (var i in userData) {
        userData[i].portrait = uploadServer + userData[i].portrait;
    }

    var player;
    var currentUrl;

    new Vue({
        el: '#app',
        data: {
            isMobileTerminal: false,
            title: '',
            videoTableData: videoData,
            userTableData: userData,

            collections: [[${collects}]]
        },

        methods: {
            /**
             * 点击播放
             * @param index
             */
            play: function (index) {
                $('#video').show();

                var _self = this;
                var video = _self.videoTableData[index];

                if (!!currentUrl) {
                    currentUrl = video.url;
                    player.loadVideoByID({
                        fileID: video.url,
                        appID: video.appId,
                        t: video.t,
                        sign: video.sign,
                    })
                } else {
                    currentUrl = video.url;
                    // if content already load, execute play, else load.
                    if (!player) {
                        _self.title = video.name;
                        _self.$nextTick(function () {
                            var $videoBox = $('#player');
                            player = player || TCPlayer('player', {
                                fileID: video.url,
                                appID: video.appId,
                                width: $videoBox.width(),
                                height: $videoBox.height(),
                                definition: 30,
                                t: video.t,
                                sign: video.sign,
                                options: {
                                    playbackRates: {}
                                },
                                plugins: {
                                    ContinuePlay: { // 开启续播功能
                                        // auto: true, //[可选] 是否在视频播放后自动续播
                                        // text:'上次播放至 ', //[可选] 提示文案
                                        // btnText: '恢复播放' //[可选] 按钮文案
                                    }
                                }
                            });
                        })
                    }
                }
            },
        }
    })
</script>
<script>
    window.onload = function () {
        var res = document.cookie.indexOf("name");
        if (res != 0) {
            var oDate = new Date();
        }
    }
</script>

</html>